<mat-card>Work Planning</mat-card>
<mat-progress-spinner *ngIf="!isDailyPlanLoaded" mode="indeterminate"></mat-progress-spinner>
<div class="content" *ngIf="isDailyPlanLoaded">
  <mat-expansion-panel>
    <mat-expansion-panel-header [collapsedHeight]="collapsedHeight"
                                [expandedHeight]="expandedHeight">
      <mat-panel-title>
        <div class="daily-plan-info">
          <span class="info">Daily plan</span>
          <button mat-icon-button (click)="updateDailyPlan()">
            <mat-icon>create</mat-icon>
          </button>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-list-item>
        Employees per day: {{dailyPlan.employeesPerDay}}
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        Orders per day: {{dailyPlan.ordersPerDay}}
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        Returns per day: {{dailyPlan.returnsPerDay}}
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        Complaints resolved per day: {{dailyPlan.complaintsResolvedPerDay}}
      </mat-list-item>
    </mat-list>
  </mat-expansion-panel>

  <mat-card *ngIf="isDailyPlanLoaded && isTodayLoaded">
    <mat-list>
      <mat-list-item class="daily-plan-info">
        <span><b>Today</b></span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Orders to be completed: {{ordersToday}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Returns to be completed: {{returnsToday}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Complaints to be completed: {{complaintsToday}}</span>
      </mat-list-item>
    </mat-list>
  </mat-card>
  <mat-card *ngIf="isDailyPlanLoaded && isTomorrowLoaded">
    <mat-list>
      <mat-list-item class="daily-plan-info">
        <span><b>Tomorrow</b></span>
        <div class="alert" *ngIf="isTomorrowPlanLoaded && shouldShowPlanForTomorrow()">
          <span class="alert-label">You may need to introduce a special plan</span>
          <button mat-icon-button (click)="tomorrowSpecialPlan()">
            <mat-icon>create</mat-icon>
          </button>
        </div>
        <div class="special" *ngIf="isTomorrowPlanLoaded && specialPlanTomorrow.id != 0">
          <span class="alert-label">See special plan</span>
          <button mat-icon-button (click)="showPlan(specialPlanTomorrow)">
            <mat-icon>grade</mat-icon>
          </button>
        </div>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Orders to be completed: {{ordersTomorrow}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Returns to be completed: {{returnsTommorrow}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Complaints to be completed: {{complaintsTomorrow}}</span>
      </mat-list-item>
    </mat-list>
  </mat-card>
  <mat-card *ngIf="isDailyPlanLoaded && isInTwoDaysLoaded">
    <mat-list>
      <mat-list-item>
        <span><b>In two days</b></span>
        <div class="alert" *ngIf="isInTwoDaysPlanLoaded && shouldShowPlanForTwoDays()">
          <span class="alert-label">You may need to introduce a special plan</span>
          <button mat-icon-button (click)="inTwoDaysSpecialPlan()">
            <mat-icon>create</mat-icon>
          </button>
        </div>
        <div class="special" *ngIf="isInTwoDaysPlanLoaded && specialPlanInTwoDays.id != 0">
          <span class="alert-label">See special plan</span>
          <button mat-icon-button (click)="showPlan(specialPlanInTwoDays)">
            <mat-icon>grade</mat-icon>
          </button>
        </div>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Orders to be completed: {{ordersInTwoDays}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Returns to be completed: {{returnsInTwoDays}}</span>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        <span class="info">Complaints to be completed: {{complaintsInTwoDays}}</span>
      </mat-list-item>
    </mat-list>
  </mat-card>
  <button mat-raised-button class="floating-button" (click)="addSpecialPlan()">Add special plan</button>
</div>
